@extends('layout.home.master')
@section('content')
    <div class="row mt-2">
        <div class="col-9">
            <div class="card card-body p-5">
                @auth()
                <div class="row">
                    <div class="col text-right">
                        @if($article->isFavorite(auth()->user()))
                        <a href="{{route('common.favorite.make',['model'=>'Article','id'=>$article->id])}}" class="btn btn-danger btn-sm">取消收藏</a>
                        @else
                        <a href="{{route('common.favorite.make',['model'=>'Article','id'=>$article->id])}}" class="btn btn-white btn-sm">收藏</a>
                        @endif
                    </div>
                </div>
                @endauth

                <div class="row">
                    <div class="col text-center">
                        <!-- Title -->
                        <h2 class="mb-3">
                            {{$article->title}}
                        </h2>
                        <p class="card-text small text-muted">
                            <span class="fe fe-user "></span> {{$article->user->name}} .<span class="fe fe-clock "></span> {{$article->created_at->diffForHumans()}}
                        </p>
                    </div>
                </div> <!-- / .row -->
                <hr>
                <div class="content mt-3">
                    <div id="markdown">
                        {!! $article->markdown !!}
                    </div>

                    <hr>
                    @auth()
                    {{--<div class="text-center">--}}
                        {{--@if($isZan)--}}
                        {{--<a class="btn btn-outline-danger" href="{{route('zan',$article)}}">取消赞</a>--}}
                        {{--@else--}}
                        {{--<a class="btn btn-outline-success" href="{{route('zan',$article)}}">点个赞呗</a>--}}
                        {{--@endif--}}
                    {{--</div>--}}
                        <div class="text-center">
                            @if($article->isZan(auth()->user()))
                                <a class="btn btn-outline-danger" href="{{route('common.zan.make',['model'=>'Article','id'=>$article->id])}}">取消赞</a>
                            @else
                                <a class="btn btn-outline-success" href="{{route('common.zan.make',['model'=>'Article','id'=>$article->id])}}">赞</a>
                            @endif
                        </div>

                    @endauth
                </div>
                <div class="avatar">
                    @foreach($article->zan()->with(['user'])->get() as $user)
                        <img src="{{$user->user->icon}}" alt="..." class="avatar-img rounded-circle">
                    @endforeach
                </div>
            </div>

            @include('layout.common.comment',['model'=>$article])
        </div>
        <div class="col-sm-3">
            <div class="card">
                <div class="card-header">
                    {{$article->user->name}}
                </div>
                <div class="card-body text-center">
                    <div class="avatar avatar-xl">
                        <img src="{{$article->user->icon}}" alt="..." class="avatar-img rounded-circle">
                    </div>
                </div>
                @auth()
                    @can('isSub',$article->user)
                        <div class="card-footer">
                            @if(auth()->user()->isfollowing($article->user))
                                <a href="{{route ('member.follow',$article->user)}}" class="btn btn-outline-danger btn-block">取消关注</a>
                            @else
                                <a href="{{route ('member.follow',$article->user)}}" class="btn btn-outline-success btn-block">关注</a>
                            @endif
                        </div>
                    @endcan
                @endauth
            </div>
        </div>
    </div>

@endsection
@push('js')
    <script>
        require(['hdjs', 'marked', 'highlight'], function (hdjs, marked) {
            $(document).ready(function () {
                $('pre code').each(function (i, block) {
                    hljs.highlightBlock(block);
                });
            });
        })
    </script>
@endpush